<script setup>
import { ref, reactive, onMounted } from 'vue'
import { Product } from '@/api';
import { ElMessage } from 'element-plus';
import { useRouter, useRoute } from 'vue-router';
const activeName = ref(1)
// 标签页换页
let tab_type = ref(1)
const handleClick = (tab, event) => {
    console.log(tab.props.name)
    load_product({ type: tab.props.name })
    tab_type.value = tab.props.name
}

const formInline = reactive({
    store_name: '',
    cate_id: '',
    type: tab_type.value,
})

const onSubmit = () => {
    console.log('submit!')
}

// 获取表单数据
let tableData = ref([]);
let count = ref(0)
let load_product = async (form) => {
    let { status, msg, data } = await Product.product(form);
    if (status) {
        count.value = data.count;
        tableData.value = data.list
        console.log(tableData.value);
    }
}
// 获取标签页
let tabs = ref([]);
let load_tabs = async () => {
    let { status, msg, data } = await Product.type_header();
    if (status) {
        tabs.value = data.list;
    }
}
// 获取模板
let template_form = ref([]);
let load_template = async () => {
    let { status, msg, data } = await Product.get_template();
    if (status) {
        console.log(data);
        template_form.value = data
    }
}
// 获取分类列表
let product_list_form = ref([])
let load_product_list = async () => {
    let { status, msg, data } = await Product.product_list();
    console.log(status, msg, data);
    product_list_form.value = data
}
onMounted(() => {
    load_product({ type: 1 })
    load_tabs()
    load_product_list()
})
// 设置上架、下架
let handle_set_show = async (id, is_show) => {
    let { status, msg } = await Product.set_show(id, is_show)
    if (status === 200) {
        ElMessage.success(msg)
    }
}
// 选中的table数据项的id数组
let checked_tableItem_id = ref([])
// 改变选择表格某一项时 -- 包含CheckBoxItem，CheckBoxAll
const handleChangeCheckBox = (selection) => {
    if (selection.length !== 0) {
        selection.map((item, index) => {
            checked_tableItem_id.value.push(item.id)
        })
    } else {
        checked_tableItem_id.value = []
    }
}
// 批量下架
let handle_set_show_more = async () => {
    if (checked_tableItem_id.value.length === 0) {
        ElMessage({
            message: '请选择用户',
            type: 'warning',
            duration: 5000,
        })
    } else {
        let check_id = checked_tableItem_id.value;
        let ids = [];
        check_id.forEach(item => {
            if (ids.indexOf(item) === -1) {
                ids.push(item);
            }
        })
        console.log(ids);
        let { status, msg } = await Product.product_unshow({ ids })
        if (status === 200) {
            ElMessage.success(msg)
        }
    }
}
// 搜索商品
let search_product = () => {
    load_product(formInline)
    formInline = reactive({
        store_name: '',
        cate_id: '',
        type: tab_type.value,
    })
}
// 商品详情
let is_show_product_detail = ref(false)
let product_detail_form = ref({})
let show_product_detail = async (id) => {
    let { status, msg, data } = await Product.product_detail(id)
    console.log(status, msg, data);
    product_detail_form.value = data
    is_show_product_detail.value = true
}

let router = useRouter();
// 添加商品
let set_produvt = (id) => {
    router.push({ name: "ProductUpdata", params: { product_id: id } })
}
// 批量设置
let open_a = ref(false);
let open_b = ref(false);
let open_c = ref(false);
let open_d = ref(false);
let open_e = ref(false);
let open_f = ref(false);
let handleCommand = (command) => {
    if (command === 'a') {
        if (checked_tableItem_id.value.length === 0) {
            ElMessage({
                message: '请选择用户',
                type: 'warning',
                duration: 5000,
            })
        } else {
            open_a.value = true;
        }

    } else if (command === 'b') {
        load_template();
        open_b.value = true;
    } else if (command === 'c') {
        open_c.value = true;
    } else if (command === 'd') {
        open_d.value = true;
    } else if (command === 'e') {
        open_e.value = true;
    } else {
        open_f.value = true;
    }
}
let setting_form = ref({
    cate_id: [],
    coupon_ids: [],
    freight: 0,
    give_integral: 0,
    ids: [],
    label_id: [],
    logistics: [],
    postage: 0,
    recommend: [],
    temp_id: null,
    type: 1,
})
let save_setting = async () => {
    let { status, msg } = await Product.batch_setting();
    if (status) {
        ElMessage.success(msg)
    }
}
// 移入回收站
let handle_remove_product = async (id) => {
    ElMessageBox.confirm(
        '是否确认删除?',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            let { status, msg } = await Product.remove_product(id);
            if (status == 200) {
                ElMessage.success(msg)
                load_product(formInline)
            } else {
                ElMessage.error(msg)
            }
        })
        .catch(() => {
            ElMessage.info('取消')
        })
}
</script>
<template>
    <el-card class="box-card">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane v-for="item in tabs" :label="item.name" :name="item.type">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="商品分类" :value="formInline.cate_id">
                        <el-select v-model="formInline.cate_id" clearable placeholder="请选择商品分类"
                            :popper-options="{ modifiers: [{ name: 'computeStyles', options: { adaptive: false } }] }">
                            <el-option v-for="item in product_list_form" :label="item.cate_name" :value="item.id" />
                        </el-select>
                    </el-form-item>
                    <el-form-item style="width: 30%;" :value="formInline.store_name" label="商品搜索">
                        <el-input v-model="formInline.store_name" style="width: 80%;" placeholder="请输入商品名称/关键字/ID" />
                        <el-button type="primary" @click="search_product">搜索</el-button>
                    </el-form-item>
                </el-form>
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item>
                        <el-button type="primary" @click="set_produvt(0)">添加商品</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">商品采集</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-dropdown @command="handleCommand"
                            :popper-options="{ modifiers: [{ name: 'computeStyles', options: { adaptive: false } }] }">
                            <el-button type="primary">
                                批量修改<el-icon class="el-icon--right"><arrow-down /></el-icon>
                            </el-button>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item command="a">商品分类</el-dropdown-item>
                                    <el-dropdown-item command="b">物流设置</el-dropdown-item>
                                    <el-dropdown-item command="c">购买送积分</el-dropdown-item>
                                    <el-dropdown-item command="d">购买送优惠券</el-dropdown-item>
                                    <el-dropdown-item command="e">关联用户标签</el-dropdown-item>
                                    <el-dropdown-item command="f">活动推荐</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="handle_set_show_more">批量下架</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">导出</el-button>
                    </el-form-item>
                </el-form>
                <el-table :data="tableData" @selection-change="handleChangeCheckBox" style="width: 100%;margin-top: 15px;"
                    border :header-cell-style="{ backgroundColor: '#ececec' }">
                    <el-table-column type="expand">
                        <template #default="props">
                            <el-row :gutter="20" class="expand_row">
                                <el-col :span="10">
                                    <div m="4">
                                        <p m="t-0 b-2">商品分类:{{ props.row.cate_name }}</p>
                                        <p m="t-0 b-2">收藏:{{ props.row.collect }}</p>
                                    </div>
                                </el-col>
                                <el-col :span="10">
                                    <div m="4">
                                        <p m="t-0 b-2">商品市场价格:{{ props.row.ot_price }} </p>
                                        <p m="t-0 b-2">成本价:{{ props.row.cost }}</p>
                                        <p m="t-0 b-2">虚拟销量:{{ props.row.ficti }}</p>
                                    </div>
                                </el-col>
                            </el-row>
                        </template>
                    </el-table-column>
                    <el-table-column type="selection" width="55" />
                    <el-table-column prop="id" label="商品ID" />
                    <el-table-column label="商品图">
                        <template #default="scope">
                            <el-avatar :src="scope.row.image" fit="contain" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="store_name" label="商品名称" width="300" />
                    <el-table-column prop="product_type" label="商品类型" />
                    <el-table-column prop="price" label="商品售价" />
                    <el-table-column prop="sales" label="销量" />
                    <el-table-column prop="stock" label="库存" />
                    <el-table-column prop="sort" label="排序" />
                    <el-table-column prop="is_show" label="状态">
                        <template #default="scope">
                            <el-switch @change="handle_set_show(scope.row.id, scope.row.is_show)"
                                v-model="scope.row.is_show" :active-value="1" :inactive-value="0" inline-prompt
                                active-text="上架" inactive-text="下架" />
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="240">
                        <template #default="scope">
                            <el-button link @click="show_product_detail(scope.row.id)" type="primary"
                                size="small">查看</el-button>
                            <el-button link type="primary" @click="set_produvt(scope.row.id)" size="small">编辑</el-button>
                            <el-link href="/product/listreply" :underline="false">
                                <el-button link type="primary" size="small">查看评论</el-button>
                            </el-link>
                            <el-button link @click="handle_remove_product(scope.row.id)" type="primary"
                                size="small">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-row style="margin-top: 20px;" justify="end" align="middle">
                    <span style="margin-right: 10px;">共 {{ count }} 条</span>
                    <el-pagination background layout="prev, pager, next,jumper" :total="10" />
                </el-row>
            </el-tab-pane>
        </el-tabs>
    </el-card>
    <!-- 查看详情 -->
    <el-dialog v-model="is_show_product_detail" title="详情预览" center width="375px">
        <div class="detail_center" m="t-4">
            <span class="demonstration">商品详情</span>
            <el-carousel trigger="click">
                <el-carousel-item v-for="item in product_detail_form.productInfo.slider_image" :key="item">
                    <el-image :src="item" />
                </el-carousel-item>
            </el-carousel>
        </div>
        <el-descriptions :column="3">
            <el-descriptions-item>￥{{ product_detail_form.productInfo.price }}</el-descriptions-item>
            <el-descriptions-item>￥{{ product_detail_form.productInfo.vip_price }}</el-descriptions-item>

            <el-descriptions-item>
                <el-tag size="large">SVIP</el-tag>
            </el-descriptions-item>
            <el-descriptions-item :span="24">{{ product_detail_form.productInfo.store_name }}</el-descriptions-item>
            <el-descriptions-item label="原价">￥{{ product_detail_form.productInfo.ot_price }}</el-descriptions-item>
            <el-descriptions-item label="库存">{{ product_detail_form.productInfo.stock }}
                {{ product_detail_form.productInfo.unit_name }} </el-descriptions-item>
            <el-descriptions-item label="销量">{{ product_detail_form.productInfo.ficti }}
                {{ product_detail_form.productInfo.unit_name }} </el-descriptions-item>
        </el-descriptions>
        <div class="detail_center" m="t-4">
            <span class="demonstration">商品介绍</span>
            <div class="description" v-html="product_detail_form.productInfo.description">
            </div>
        </div>
    </el-dialog>
    <!-- 基础设置--商品分类 -->
    <el-dialog v-model="open_a" title="批量设置">
        <el-divider content-position="left">基础设置</el-divider>
        <el-form>
            <el-form-item label="商品分类">
                <el-select v-model="formA" clearable multiple placeholder="请选择商品分类"
                    :popper-options="{ modifiers: [{ name: 'computeStyles', options: { adaptive: false } }] }">
                    <el-option v-for="item in product_list_form" :label="item.cate_name" :value="item.id" />
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="open_a = false">取消</el-button>
            <el-button @click="save_setting" type="primary">保存</el-button>
        </template>
    </el-dialog>
    <!-- 基础设置--物流设置 -->
    <el-dialog v-model="open_b" title="批量设置">
        <el-divider content-position="left">物流设置</el-divider>
        <el-form label-width="100px">
            <el-form-item label="物流方式">
                <el-checkbox-group v-model="checkList">
                    <el-checkbox label="快递" />
                    <el-checkbox label="到店核销" />
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="运费设置">
                <el-radio-group v-model="radio">
                    <el-radio :label="3">固定邮费</el-radio>
                    <el-radio :label="6">运费模板</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item>
                <el-input style="width: 200px;"></el-input>
                <el-select v-model="value" clearable placeholder="请选择运费模板">
                    <el-option v-for="item in template_form" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
            </el-form-item>
        </el-form>

        <template #footer>
            <el-button @click="open_b = false">取消</el-button>
            <el-button @click="save_setting" type="primary">保存</el-button>
        </template>
    </el-dialog>
    <!-- 基础设置--积分 -->
    <el-dialog v-model="open_c" title="批量设置">
        <el-divider content-position="left">营销设置</el-divider>
        <el-form>
            <el-form-item label="赠送积分">
                <el-input-number v-model="num" class="mx-4" :min="1" :max="10" controls-position="right"
                    @change="handleChange" />
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="open_c = false">取消</el-button>
            <el-button @click="save_setting" type="primary">保存</el-button>
        </template>
    </el-dialog>
    <!-- 基础设置--优惠券 -->
    <el-dialog v-model="open_d" title="批量设置">
        <el-divider content-position="left">营销设置</el-divider>
        <el-form>
            <el-form-item label="赠送优惠券">
                <el-button type="primary">添加优惠券</el-button>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="open_d = false">取消</el-button>
            <el-button @click="save_setting" type="primary">保存</el-button>
        </template>
    </el-dialog>
    <!-- 基础设置--关联用户标签 -->
    <el-dialog v-model="open_e" title="批量设置">
        <el-divider content-position="left">营销设置</el-divider>
        <el-form>
            <el-form-item label="关联用户标签">
                <el-input readonly v-model="input2" placeholder="Please input">
                    <template #append>
                        <el-icon>
                            <ArrowDown></ArrowDown>
                        </el-icon>
                    </template>
                </el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="open_e = false">取消</el-button>
            <el-button @click="save_setting" type="primary">保存</el-button>
        </template>
    </el-dialog>
    <!-- 基础设置--活动 -->
    <el-dialog v-model="open_f" title="批量设置">
        <el-divider content-position="left">营销设置</el-divider>
        <el-form>
            <el-form-item label="商品推荐">
                <el-checkbox-group v-model="checkList">
                    <el-checkbox label="热卖单品" />
                    <el-checkbox label="促销单品" />
                    <el-checkbox label="精品推荐" />
                    <el-checkbox label="首发新品" />
                    <el-checkbox label="优品推荐" />
                </el-checkbox-group>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="open_f = false">取消</el-button>
            <el-button @click="save_setting" type="primary">保存</el-button>
        </template>
    </el-dialog>
</template>

<style lang="less" scoped>
.demonstration {
    color: var(--el-text-color-secondary);
}

.detail_center {
    text-align: center;

    .description {
        p {
            padding: 0;
            margin: 0;
            -webkit-margin-before: 0;
            -webkit-margin-after: 0;
        }
    }

}
</style>